<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插槽</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <hr/>
    <p>这是vue2.6前的写法</p>
    <liuling>
      <!-- 3.1 默认插槽实现作用域插槽 -->
      <!-- slotScope = {row: {name: '张三', age: 18}, desc: '美眉的'} -->
      <template slot-scope="slotScope">
        <p>唯有杜康--{{slotScope.row}}</p>
        <p>唯有杜康--{{slotScope.desc}}</p>
      </template>
      <!-- 3.2 作用域插槽=具名插槽+数据 -->
      <!-- slot-scope="scope"获取数据 slot="插槽名字" -->
      <!-- scope={info: {name: 'lisi', age: 16}} -->
      <template slot-scope="scope" slot="userinfo">
        <p>向天再借500年--{{scope.info}}</p>
      </template>
    </liuling>
    <hr/>
    <hr/>
    
    <div style="background-color: blueviolet;">
      <p>这是vue2.6后的写法</p>
      <liuling>
        <!-- 3.1 默认插槽实现作用域插槽 -->
        <!-- slotScope = {row: {name: '张三', age: 18}, desc: '美眉的'} -->
        <!-- v-slot:default="接受数据对象"  -->
        <!-- <template v-slot:default="slotScope"> -->
        <!-- <template #default="slotScope"> -->
        <template v-slot="slotScope">
          <p>唯有杜康--{{slotScope.row}}</p>
          <p>唯有杜康--{{slotScope.desc}}</p>
        </template>
        <!-- 3.2 作用域插槽=具名插槽+数据 -->
        <!-- slot-scope="scope"获取数据 slot="插槽名字" -->
        <!-- scope={info: {name: 'lisi', age: 16}} -->
        <template v-slot:userinfo="scope">
          <p>向天再借500年--{{scope.info}}</p>
        </template>
      </liuling>
    </div>
  </div>
</body>
</html>
<script>
  // 插槽三种： 默认插槽 具名插槽 作用域插槽
  // 1. 默认插槽
  // 2. 具名插槽 vue2.6前 slot="插槽名字" 2.6以后 v-slot:插槽名字
  // 3. 作用插槽就是 提供坑位同时提供数据
  // 可以使用默认插槽和具名插槽提供坑位 + 提供数据
  // vue2.6前后写法对比
  // <template slot-scope="slotScope">--》 <template v-slot="slotScope">
  // <template slot-scope="scope" slot="userinfo">--》 <template v-slot:userinfo="scope">
  Vue.component('liuling', {
    data () {
      return {
        mm: '美眉的'
      }
    },
    template: `<div>
      <!-- 3. 作用域插槽=默认插槽+数据 -->
      <!-- 3.1 通过属性绑定提供数据 -->
      <slot :row="{name: '张三', age: 18}" :desc="mm"></slot>
      <hr/>
      <!-- 3. 作用域插槽=具名插槽+数据 -->
      <!-- 3.2 通过属性绑定提供数据 -->
      <slot name="userinfo" :info="{name: 'lisi', age: 16}"></slot>
    </div>`
  })
  var vm = new Vue({
    el: '#app'
  })
</script>